<template>
	<view class="">
		<view class="fl_al" style="padding: 0 32rpx;box-sizing: border-box;">
			<text class="type">{{type==0?'自提':'外卖'}}</text>
			<view class="kuang4">
				<u-search placeholder="请输入想喝的饮品" bgColor="#fbfbfb" v-model="keyword"></u-search>
			</view>
		</view>
		<view class="lunbo">
			<u-swiper :list="list1" @change="change" height="280rpx" @click="click"></u-swiper>
		</view>
		<view class="neirong fl_al2">
			<view class="caidan">
				<view class="show son">
					品牌
				</view>
				<view class="son">
					设备类型
				</view>
			</view>
			<view class="xq">
				<view class="title">
					品牌
				</view>
				<view class="kuang3">
					<view class="fl_ju spson" v-for="item in chanping">
						<view class="flleft fl_al">
							<image src="../../static/tx.png" mode=""></image>
							<view class="xinxi">
								<view class="name">
									{{item.productName}}
								</view>
								<view class="shu">
									{{item.briefDescription}}
								</view>
								<view class="qian">
									¥{{item.sumPrice/100}}
								</view>
							</view>
						</view>
						<view class="flright">
							<image src="../../static/add.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btns fl_ju">
			<image src="../../static/gouwo.png" @click="show = true" class="gouwo" mode=""></image>
			<view class="fl_al">
				<view class="jine">订单金额 <text class="qian2">￥118.00</text> </view>
				<u-button type="primary"
					:customStyle='{width:"200rpx",fontSize:"24rpx",borderRadius:"88rpx",margin:"0"}'
					text="去结算"></u-button>
			</view>

		</view>
		<u-popup :show="show" mode="bottom" @close="close" @open="open">
			<view class="phone">
				<view class="haoma fl_ju">
					<text>已选商品</text>
					<view class="del fl_al">
						<image src="../../static/ashbin.png" mode=""></image>删除
					</view>
				</view>
				<view class="fl_ju spson">
					<view class="flleft fl_ju">
						<view class=" fl_al">
							<image src="../../static/tx.png" mode=""></image>
							<view class="xinxi">
								<view class="name">
									土豆泥
								</view>
								<view class="shu">
									鲜柠配乌龙，柠檬新茶宠
								</view>
								<view class="qian">
									¥18.00
								</view>
							</view>
						</view>

						<view class="flright">
							<u-number-box v-model="value">
								<view slot="minus" class="minus">
									<u-icon name="minus" size="12"></u-icon>
								</view>
								<text slot="input" style="width: 50px;text-align: center;"
									class="input">{{value}}</text>
								<view slot="plus" class="plus">
									<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
								</view>
							</u-number-box>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		baseModuleList
	} from '@/api/url.js'
	export default {
		data() {
			return {
				value: 1,
				title: '更多操作',
				list: [{
						name: '一键转发',
						subname: "",
						color: '#666666',
						fontSize: '12'
					}, {
						name: '取消置顶',
						subname: "",
						color: '#666666',
						fontSize: '12'
					},

				],
				show: false,
				keyword: '本店爆款猪猪奶茶',
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				type: 0,
				params: {
					pageNum: 1,
					pageSize: 10,
				},
				chanping:[]
			};
		},

		computed: {},
		onShow() {},
		onLoad(option) {
			console.log(option)
			this.type = option.type
			// uni.setNavigationBarTitle({
			// 	title: `设置偏好`
			// }); //设置标题
			this.cplist()
		},
		methods: {
			change(){},
			close() {
				this.show = false
			},
			cplist() {
				orderProductList(this.params, this.token).then(res => {
					console.log(res)
					this.chanping = res.data.rows
				})
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
		padding: 24rpx 0;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
		margin-left: 80px;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #3AA3FF;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.lunbo {
		margin: 32rpx 0;
	}

	.type {
		font-size: 32rpx;
	}

	.kuang4 {
		width: 582rpx;
		margin-left: 42rpx;
		padding: 17rpx 30rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		background-color: #FBFBFB;
		box-shadow: 5px 5px 10px 1px #EBEBEB;
	}

	.neirong {
		.caidan {
			height: 100vh;
			background-color: #fff;
			width: 25%;
			text-align: center;
			border: 1px solid #F8F8F8;

			.son {
				font-weight: 600;
				font-size: 28rpx;
				color: #505050;
				padding: 33rpx 38rpx;
				box-sizing: border-box;
				background-color: #F8F8F8;
			}

			.show {
				background-color: #fff;
				color: #3AA3FF;
				border-left: 10rpx solid #3AA3FF;
			}
		}

		.xq {
			background-color: #fff;
			width: 75%;
			padding: 30rpx 26rpx;
			box-sizing: border-box;

			.title {
				font-weight: 600;
				font-size: 28rpx;
				color: #3AA3FF;
			}

			.bqlist {
				display: flex;
				width: 100%;
				flex-wrap: wrap;
				justify-content: flex-start;

				.bq {
					background-color: #F4F4F4;
					width: 30%;
					flex: 1;
					margin: 24rpx 5px 0px 0;
					width: calc((100% - 10px) / 3);
					min-width: calc((100% - 10px) / 3);
					max-width: calc((100% - 10px) / 3);
					font-size: 24rpx;
					color: #666666;
					text-align: center;
					padding: 24rpx;
					box-sizing: border-box;
					border-radius: 12rpx;
				}

				.bq:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}

	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background-color: #fff;
		padding: 25rpx 30rpx;
		box-sizing: border-box;
		border-top: 1px solid #707070;

		.jine {
			color: #2C2C2C;
			font-size: 32rpx;

			.qian2 {
				color: #FF5B4C;
				font-weight: 600;
				margin: 0 15rpx;
			}
		}

		.gouwo {
			width: 50rpx;
			height: 50rpx;

			imagew {
				width: 100%;
				height: 100%;
			}
		}
	}

	.phone {
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		text-align: center;
		border-top-right-radius: 32rpx;
		border-top-left-radius: 32rpx;

		.xinxi {
			text-align: left;
		}

		.title {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 42rpx;
		}

		.haoma {
			text {
				color: #090909;
				font-size: 26rpx;
				font-weight: 600;
			}

			.del {
				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				font-size: 24rpx;
				color: #AAAAAA;
			}
		}


	}

	.quxiao {
		font-weight: 400;
		font-size: 32rpx;
		color: #fff;
		margin-top: 32rpx;
		text-align: center;
	}

	.u-safe-bottom {
		display: none;
	}

	.u-popup__content {
		background-color: #fff0 !important;
	}

	.spson {
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-top: 1px solid #EBEBEB;
		box-shadow: 5px 5px 10px 1px #EBEBEB;
		border-radius: 20rpx;

		.flleft {
			.name {
				font-weight: 600;
				font-size: 30rpx;
			}

			.shu {
				font-size: 24rpx;
				color: #c5c5c5;
				margin: 10rpx 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.qian {
				font-size: 20rpx;
			}

			image {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
			}
		}

		.flright {
			width: 40rpx;
			height: 40rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	// /deep/ .u-popup__content.data-v-52d4ddd1 {
	// 	bottom: 120rpx !important;
	// }
	/deep/ .u-transition {
		bottom: 120rpx !important;
	}
</style>